<template>
  <a-layout-header class="header">
    <div class="logo" v-if="$customer === 'cq'">
      <div>
        <img src="@/assets/images/logo-cq.png"  height="35" style="transform: translateY(-3px); margin-left: 15px;" />
      </div>
    </div>
    <div class="logo" v-else-if="$customer === 'zhy'">
      <div class="logoImg">
        <img src="@/assets/images/hy_lg.png" width="157.61" height="47" style="transform: translateY(-3px);" />
        <span style="opacity: 0.5; border: 1px solid #FFFFFF; margin: 0 20px"></span>
      </div>
      <span class="fontSty">{{ sysTitle }}</span>
    </div>
    <div class="logo" v-else>
      <img src="@/assets/images/logo1.png" height="35" style="margin: 0 15px; filter: invert(100%) brightness(300%);" />
      <span class="fontSty">{{ sysTitle }}</span>
    </div>
    <div class="tools">
      <user-outlined class="icon" @click="userInfo" />
      <setting-outlined @click="settingParams" class="icon" />
      <a-popconfirm placement="bottomRight" @confirm="confirm">
        <template #title>
          {{ "确定要退出登录吗？" }}
        </template>
        <!-- <a-tooltip title="退出登录"> -->
        <img src="@/assets/login/logout.png" width="16" class="logout">
        <!-- </a-tooltip> -->
      </a-popconfirm>
    </div>
    <!-- 用户信息 -->
    <UserInfo v-if="userInfoIsshow" @closeDialog="closeDialog"></UserInfo>
    <!-- 设置 -->
    <SettingParams v-if="isshow" @closeDialog="closeDialog"></SettingParams>
  </a-layout-header>
</template>

<script>
import { SettingOutlined, UserOutlined } from '@ant-design/icons-vue'
import SettingParams from './modal/settingParams.vue'
import UserInfo from "./modal/userInfo.vue"
import { message } from 'ant-design-vue'
import { SYS_NAME } from '@/config/index'
export default {
  components: {
    SettingOutlined,
    SettingParams,
    UserOutlined,
    UserInfo
  },
  data() {
    return {
      isshow: false,
      userInfoIsshow: false,
      sysTitle: SYS_NAME
    }
  },
  methods: {
    // 用户信息
    userInfo() {
      this.userInfoIsshow = true
    },
    // 登出
    confirm() {
      this.$router.push({ name: "login" })
      message.success("退出成功")
    },
    // 设置
    settingParams() {
      this.isshow = true
    },
    // 关闭设置对话框
    closeDialog() {
      this.isshow = false
      this.userInfoIsshow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  padding: 0;
  margin: 0;
  height: 60px;
  background: #0273C4;
}

.tools {
  height: inherit;
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.logout {
  cursor: pointer;
}

.logo {
  float: left;
  width: 600px;
  height: 100%;
  overflow: hidden;
  transition: all 0.1s linear;
  display: flex;
  align-items: center;
}

.logoImg {
  padding-left: 10px;
  background-image: linear-gradient(270deg, #0273C4 0%, #A3E8FF 100%);
}

.fontSty {
  font-family: 'PingFangSC-Semibold';
  font-size: 23px;
  color: #FFFFFF;
  letter-spacing: 0;
  font-weight: 600;
  letter-spacing: 1px;
}

.pull-right {
  float: right;
  margin-right: 20px;
}

.ant-layout-header {
  height: 55px;
  line-height: 55px;
}

:deep(.topmenu) {
  float: left;
  width: 50%;
  height: 55px;
  line-height: 55px;
  background: #0273C4;
  color: #FFFFFF;
  font-size: 18px;
  display: flex;
  align-items: center;

}

.top {
  max-width: 100%;
  height: 42px;
  color: #FFFFFF;
  background-image: linear-gradient(180deg, #2ABFF1 0%, #157DEA 99%);
  border: 1px solid #29BFF5;
  box-shadow: 0 0 10px 0 rgba(0, 31, 68, 0.38);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;

}

:deep(.ant-menu.ant-menu-dark .ant-menu-item-selected) {
  //选中
  @extend .top
}

:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover) {
  @extend .top
}

.tanquname {
  font-family: MicrosoftYaHei;
  font-size: 16px;
  color: #FFFFFF;
  margin: 0;
  font-weight: 400;
}

.approvecount {
  color: #f3f3f3;
  font-size: 24px;
  margin-right: 10px;
}

.IconSty {
  font-size: 18px;
}

.icon {
  font-size: 16px;
  color: #FFFFFF;
  margin-right: 15px;
  cursor: pointer;
}
</style>
